<template>
	<view class="box">
		<view class="bg f-w">
			<image class="bg-img" src="https://jw.xzsw2021.com/static/sdfsdgfddd.png" mode=""></image>
			<view class="rules" @click="gorules">活动规则</view>
			<view class="content" style="position: relative;z-index: 10;">
				<!-- 文字 -->
				<!-- 二维码 -->
				<view class="code" style="position: relative;z-index: 10;">
					<view class="code2" style="position: relative;z-index: 10;">
						<image :src="img" mode=""></image>
					</view>
				</view>
				<view class="btnbg">
					<button class="btn" style="width: 304rpx;" @click="gomyshare">我的分享</button>
					<button class="btn" style="width: 304rpx;" open-type="share">分享好友</button>
				</view>
				<view class="save" @click="saveImg">保存到相册</view>
			</view>
		</view>
		<!--  -->
		<l-painter :board="poster" :pixel-ratio='4' @success="IsOk" isRenderImage  custom-style="position: fixed; left: 9999rpx"  />

	</view>
</template>

<script>
	import lPainter from '@/components/lime-painter/index.vue'
	import Cache from '@/util/cache.js'
	export default {
		components: {
			lPainter
		},
		data() {
			return {
				poster: '',
				img: '', //二维码图片
				agent_id: '', //
				title: '',
				path:''
			}
		},
		onShareAppMessage(e) {
			
			return {
				title: this.title,
				imageUrl: this.img,
				path: `/pages/index/index?spid=${uni.getStorageSync('uid')}`, // 好友点击分享之后跳转到的小程序的页面
			}
		},
		onLoad() {
			this.getimg()
			this.getuserinfo()
		},
		onShow() {
			// this.$getHeight();
			
		},
		methods: {
			// 当前图片
			IsOk(e) {
				uni.hideLoading()
				this.path = e;
				console.log(e);

			},
			gorules() {
				uni.navigateTo({
					url: "/pages/xieyi/xieyi?type=12"
				})
			},
			gomyshare() {
				uni.navigateTo({
					url: "./list"
				})
			},
			getuserinfo() {
				this.$request('user', {}, 'GET').then(res => {
					
					uni.setStorageSync('uid', res.data.uid)
				})
			},
			// 获取二维码
			getimg() {
				this.$request('user/v2/spread_image?type=routine', {}, 'GET').then(res => {
					this.img = res.data.qrcode
					this.title = res.data.nickname + res.data.mark
					this.setBase()
				})
			},
			// 分享好友
			shareFriends() {

			},

			setBase() {
				this.poster = {
					width: "750rpx",
					height: "1300rpx",
					paddingTop: "40rpx",
					paddingLeft: "30rpx",
					background: "linear-gradient(,#2BCCA5 0%, #0D8C6D  100%)",
					boxSizing: "border-box",
					views: [{
							src: 'https://jw.xzsw2021.com/static/sdfsdgfddd.png',
							type: "image",
							css: {
								left: "0rpx",
								top: "100rpx",
								width: "688rpx",
								height: "434rpx"
							}
						},
						{
							type: "view",
							css: {
								width: '622rpx',
								height: '592rpx',
								boxSizing: 'border-box',
								left: "50%",
								borderRadius: '30rpx',
								top: "400rpx",
								backgroundColor: "#FFFFFF",
								transform: 'translateX(-50%)',
								display: "inline-block"
							}
						}, {
							type: "view",
							css: {
								width: '530rpx',
								height: '520rpx',
								boxSizing: 'border-box',
								left: "50%",
								borderRadius: '30rpx',
								top: "435rpx",
								backgroundColor: "#FFFFFF",
								border: '1rpx solid #14978e',
								transform: 'translateX(-50%)',
								display: "inline-block"
							}
						}, {
							src: this.img,
							type: "image",
							css: {
								width: '450rpx',
								height: '450rpx',
								boxSizing: 'border-box',
								left: "50%",
								top: "466rpx",
								transform: 'translateX(-50%)',
								display: "inline-block"
							}
						}
					]
				}
			},

			// 保存到相册
			saveImg() {
				let that = this;
				uni.getImageInfo({
					src: that.path,
					success: function(image) {
						uni.saveImageToPhotosAlbum({
							filePath: image.path,
							success() {
								uni.showToast({
									title: "已保存",
									icon: "none"
								})
							},
							fail(err) {
								console.log(err);
							}
						})
					}
				});


			}

		}
	}
</script>
<style>
	page {
		background-color: rgba(17, 158, 124);
	}

	.rules {
		width: 170rpx;
		height: 56rpx;
		background: rgba(255, 255, 255, 0.8);
		border-radius: 28rpx 0px 0px 28rpx;
		position: fixed;
		z-index: 999;
		top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		right: 0;
		font-size: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}
</style>
<style lang="scss" scoped>
	.box {
		.bg {
			position: relative;
			width: 750rpx;
			// height: 1458rpx;
			height: 1370rpx;

			.bg-img {
				position: absolute;
				left: 0;

				top: 100rpx;
				width: 688rpx;
				height: 434rpx;
			}
		}

		.content {
			position: relative;
			width: 750rpx;
			height: 1370rpx;
			// min-height: 100vh;
			overflow: hidden;

			.title {
				position: absolute;
				top: 150rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 750rpx;
				font-size: 60rpx;
				font-weight: bold;
				letter-spacing: 5rpx;
				text-align: center;

				.t1 {
					color: #fff;
				}

				.t2 {
					color: #FDF357;
				}
			}

			.code {
				position: absolute;
				top: 400rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 622rpx;
				height: 592rpx;
				padding: 35rpx 45rpx;
				border-radius: 30rpx;
				background-color: #fff;
				border: 1rpx solid #14978e;
				box-sizing: border-box;

				.code2 {
					padding: 35rpx;
					width: 530rpx;
					height: 520rpx;
					border: 1rpx solid #14978e;
					border-radius: 20rpx;
					box-sizing: border-box;

					image {
						width: 100%;
						height: 100%;
					}
				}
			}

			.save {
				position: absolute;
				top: 1180rpx;
				left: 50%;
				transform: translateX(-50%);
				width: 750rpx;
				color: #fff;
				font-size: 32rpx;
				text-align: center;
			}

			.btnbg {
				width: 100%;
				box-sizing: border-box;
				padding: 0 60rpx;
				position: absolute;
				top: 1040rpx;
				display: flex;
				justify-content: space-between;

				.btn {
					// position: absolute;
					// top: 1200rpx;
					// left: 50%;
					// transform: translateX(-50%);
					width: 304rpx;
					height: 100rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 32rpx;
					background: #FFFFFF;
					border-radius: 16rpx;

					button::after {
						border: none;
					}
				}
			}

		}
	}
</style>
